import React from "react"
import { TabBar } from 'antd-mobile';
import User from './user'
import Home from './home'
import Message from './message'
import '../../static/font/iconfont.css'
import '../css/global.css'

if(typeof document !== 'undefined'){
  let docEl = document.documentElement;
  docEl.style.fontSize = 10 * (docEl.clientWidth / 320) + 'px';
}

class TabBarMy extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'homeTab',
      hidden: false,
      fullScreen: true,
    };
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="首页"
            icon={
              <i className="icon iconfont">&#xe6a2;</i>
            }
            selectedIcon={
              <i className="icon iconfont">&#xe6a2;</i>
            }
            selected={this.state.selectedTab === 'homeTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'homeTab',
              });
            }}
            data-seed="logId"
          >
            <Home></Home>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="icon iconfont">&#xe6a3;</i>
            }
            selectedIcon={
              <i className="icon iconfont">&#xe6a3;</i>
            }
            title="消息"
            key="消息"
            badge={99}
            selected={this.state.selectedTab === 'messageTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'messageTab',
              });
            }}
            data-seed="logId1"
          >
            <Message></Message>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="icon iconfont">&#xe6a4;</i>
            }
            selectedIcon={
              <i className="icon iconfont">&#xe6a4;</i>
            }
            title="个人"
            key="个人"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'yellowTab',
              });
            }}
          >
            <User></User>
          </TabBar.Item>
        </TabBar>
        <style jsx="true">{`
            .am-tab-bar-tab-icon i.icon {
              font-size:22px;
            }
          `}</style>
      </div>
    );
  }
}

export default TabBarMy